<template>
	<div class="max login_main">
		<my-header></my-header>
		<div class="cont-noh power-select flex">
			<img src="../../../static/logo/kid.png" alt="" width="80%">
			<div class="btn-area flex">
				<div class="btn-main" v-for="(item,index) in power" :key="index" @click="jump(item)">
					<img :src="item.icon" alt="">
					我是{{item.name}}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import myHeader from "@/components/Header.vue";

	export default {
		components: {
			myHeader
		},
		data() {
			return {
				power: [{
						access: "gardener",
						name: "园丁",
						icon: require('@/../static/logo/teas.png')
					},
					{
						access: "kinsfolk",
						name: "家长",
						icon: require('@/../static/logo/kids.png')
					}
				],
				kindergarten: {
					id: "",
					redirectUrl: ""
				}
			};
		},
		methods: {
			getParameterFromUrl(val) {
				let uri = window.location.href;
				if (!uri) {
					uri = window.location.search;
				}
				let re = new RegExp("" + val + "=([^&?]*)", "ig");
				return uri.match(re) ? uri.match(re)[0].substr(val.length + 1) : null;
			},
			fetchRedirectUrl(selectType) {
				this.$http.fetchRedirectUrl(this.kindergarten.id + '/' + selectType).then(resp => {
					window.location.href = resp.data;
				});
			},
			jump(item) {
				this.fetchRedirectUrl(item.access);
				// window.location.href = this.kindergarten.redirectUrl. item.access;
			}
		},
		created() {
			this.kindergarten.id = this.getParameterFromUrl("id");
		},
		mounted() {
			// this.fetchRedirectUrl();
		}
	};
</script>

<style scoped>
	.login_main{
		background: #FFFFFF;
	}
	.power-select {
		width: 100%;
		padding: 40% 0;
		box-sizing: border-box;
		flex-direction: column;
		align-items: center;
	}

	.btn-area {
		width: 100%;
		margin-top: 5%;
		justify-content: space-around;
	}

	.btn-area .btn-main {
		padding: 1rem 2rem;
		background: #2aa7e1;
		color: #fff;
		border-radius: 5px;
		margin-top: 0.5rem;
	}

	.btn-area img {
		margin-right: 0.5rem
	}
</style>
